<template>
  <div>
              <!-- 地图 -->

          <div class="dt">
            <div id="index_container" class="box5555">
              <div id="search_wrap">
                <search></search>
              </div>
              <div id="map_wrap">
                <div class="wrap">
                  <div></div>
                  <div id="container"></div>
                </div>
              </div>
              <div id="heatMap_wrap">
                <heat-map-search-box></heat-map-search-box>
              </div>
              <div id="shadow"></div>
            </div>
          </div>
        
  </div>
</template>

<script>
import Search from "@/components/Search/Search.vue";
import HeatMapSearchBox from "@/components/heatMapSearchBox/heatMapSearchBox.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import bus from "@/bus/bus";
window._AMapSecurityConfig = {
  securityJsCode: "721bde09196fc32aa13db2bada67783f",
};
const TIME_COUNT = 60 // 倒计时的时间
export default {
  components: { Search, HeatMapSearchBox },
  data() {

    return {
      count: '',
      show: true,
      timer: null,
      user:{
        email:"",
        emailCode:"",
        password:"",
        storeName:"",
        address:"",
        registrant:"",
        idnumber:"",
        credit:"",
        tax:"",
        lnglat:"",

      },

      input1: "",
      input2: "",
      input250: "",
      input3: "",
      input4: "",
      input11: "",
      input22: "",
      input33: "",
      input44: "",
      input55: "",
      input66: "",
      imageUrl: "",
      showbox1: true,
      showbox2: false,
      item: undefined,
      map: null,
      autoOptions: {
        input: "",
      },
      searchPlaceInput: "",
      auto: null,
      placeSearch: null,
      district: null,
      polygons: [],
      showHeatOrNot: false,
      heatmap: null,
      heatmapList: null,
      lnglat: [116.397391, 39.909193],
      addressKeyWord: "",
      locationName: "天安门",


    };
  },

  methods: {

    getGis(){
                this.$axios.get("/villagepersonnel/personnel-info/ipAddress")
              .then((result) => {
                  console.log(result)
                  if(result.data.code =='20000'){
                      //  console.log("+++"+result.data.data.ipAddress.result.location.lng)
                      //  console.log("+++"+result.data.data.ipAddress.result.location.lat)
                      this.lnglat[0]= result.data.data.ipAddress.result.location.lng
                      this.lnglat[1]= result.data.data.ipAddress.result.location.lat
                      this.locationName=result.data.data.address

                      // console.log(this.lnglat[0])
                      // console.log(this.lnglat[1])
                      // console.log(this.locationName)
                      //       console.log("+++"+result.data.data.address)
                  }
              }).catch((err) => {
                  this.$message.error(err.message)
              })
    },

             getCode () {
       if(this.user.email!=null && this.user.email!=""){
          this.$request.post("/xkstore/zsl/zcGetCheckCode",this.user.email)
              .then((result) => {
                  console.log(result)
                  if(result.code =='20000'){
                      this.$message.success(result.message)
                  }
              }).catch((err) => {
                  this.$message.error("请查看邮箱信息！")
                  this.$message.error(err.message)
              })
          // 验证码倒计时
                  if (!this.timer) {
                    this.count = TIME_COUNT
                    this.show = false
                    this.timer = setInterval(() => {
                      if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--
                      } else {
                        this.show = true
                        clearInterval(this.timer)
                        this.timer = null
                      }
                    }, 1000)
                  }
       }else{
         this.$message.error("请输入邮箱！")
       }

         },

    change() {
      this.item = this.showbox1;
      this.showbox1 = this.showbox2;
      this.showbox2 = this.item;
    },
    jj() {
      this.$router.push({ path: "/Zhuce" });
    },


      wc() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$request.post("/xkstore/zsl/registerInfo", this.user).then((res) => {
              console.log(res);
              console.log(res.data);
              if (res.code == "20000") {
                this.$message.success(res.message);
                this.$router.push("/")
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error("验证码错误");
            });


        } else {
           this.$message.error("填写信息有误");
          // console.log("error submit!!");
          // return false;
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    checkCard(file) {
      console.log(file);
    },

    handlePictureCardPrevieww(file) {
      this.dialogImageUrll = file.url;
      this.dialogVisiblee = true;
    },
    checkCardd(file) {
      this.card(file);
    },
    card(file) {
      this.$request
        .get("/xkstore/zsl/card1", {
          params: {
            url1: file,
          },
        })
        .then((res) => {
          console.log("身份证信息");
          console.log(res);
          this.user.registrant=res.words_result.姓名.words
          this.user.idnumber=res.words_result.公民身份号码.words
        });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },


    initMap() {
      AMapLoader.load({
        key: "a3f867b547753d26491b4fe8fb3d94b4", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            // center: [116.397428, 39.90923] //初始化地图中心点位置
          });
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.HawkEye());
          this.map.addControl(new AMap.MapType());
          this.map.addControl(new AMap.Geolocation());
          this.handleAddMarker();
          this.map.on("click", (ev) => {
            // 触发事件的地理坐标，AMap.LngLat 类型
            var lnglat = ev.lnglat;
            // console.log(ev, lnglat)
            this.lnglat = [lnglat.lng, lnglat.lat];
            this.user.lnglat = [lnglat.lng, lnglat.lat]+"";
            this.map.clearMap();
            this.handleAddMarker();
            this.map.setCenter(this.lnglat);

            // 将经纬度坐标转化为详细地址
            AMap.plugin("AMap.Geocoder", () => {
              var geocoder = new AMap.Geocoder({
                extensions: "all",
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                //  city: result.adcode,
              });
              var lnglat1 = [lnglat.lng, lnglat.lat];
              geocoder.getAddress(lnglat1, (status, result) => {
                if (status === "complete" && result.info === "OK") {
                  // result为对应的地理位置详细信息
                  this.user.address = result.regeocode.formattedAddress;
                  this.locationName = result.regeocode.pois[0].name;
                }
              });
            });
          });
          this.auto = new AMap.AutoComplete(this.autoOptions);
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          }); //构造地点查询类
          this.auto.on("select", this.select);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    select(e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询查询
      this.drawBounds(e.poi.name);
      this.map.setZoom(16, true, 1);
    },
    // 行政区区域划分
    drawBounds(newValue) {
      //加载行政区划插件
      if (!this.district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 1, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district", //查询行政级别为 市
        };

        this.map.plugin(["AMap.DistrictSearch"], () => {
          this.district = new AMap.DistrictSearch(opts);
        });
        // this.district = new AMap.DistrictSearch(opts)
      }
      //行政区查询
      this.district.search(newValue, (status, result) => {
        //console.log(result)
        if (result != null) {
          this.feedBack("区域搜索成功", "success");
          if (this.polygons != null) {
            this.map.remove(this.polygons); //清除上次结果
            this.polygons = [];
          }
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                strokeWeight: 1,
                path: bounds[i],
                fillOpacity: 0.4,
                fillColor: "#80d8ff",
                strokeColor: "#0091ea",
              });
              this.polygons.push(polygon);
            }
          }
          this.map.add(this.polygons);
          this.map.setFitView(this.polygons); //视口自适应
        } else {
          this.feedBack("区域搜索失败", "error");
        }
      });
    },
    feedBack(msg, feedBackType) {
      this.$message({
        showClose: true,
        message: msg,
        type: feedBackType,
      });
    },
    showHeatMap() {
      this.map.plugin(["AMap.PlaceSearch"], () => {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 50, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: this.searchPlaceInput, // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          //map: this.map, // 展现结果的地图实例
          // panel: 'panel', // 结果列表将在此容器中进行展示。
          // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询
        placeSearch.search("商场", (status, result) => {
          // console.log(result)

          this.getHotChartPos("商场", result);
        });
      });
      this.$notify({
        title: "成功",
        message: "热力图获取成果，但是由于电脑性能，我们仅加载部分数据",
        type: "success",
      });
    },
    getHotChartPos(detail, result) {
      let lengthSize = result.poiList.pageSize;
      const count = result.poiList.count;
      // const lengthPage = count / lengthSize
      if (lengthSize > count) {
        lengthSize = count;
      }
      for (var n = 0; n < lengthSize; n++) {
        // this.map.plugin(['AMap.PlaceSearch'], () => {
        //构造地点查询类
        var realSearch = new AMap.PlaceSearch({
          pageSize: 50, // 单页显示结果条数
          pageIndex: n + 1, // 页码
          city: this.searchPlaceInput, // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          // map: this.map, // 展现结果的地图实例
          // panel: 'panel', // 结果列表将在此容器中进行展示。
          // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        realSearch.search(detail, (status, result) => {
          // for (var j = 0; j < 50; j++) {
          // this.map.remove(this.map.getAllOverlays('marker'))
          //var centerPoint = [result.poiList.pois[j].location.lng, result.poiList.pois[j].location.lat]
          // console.log(result)
          //热力图
          this.showHatChart(result);
          // }
        });
      }
    },
    showHatChart(result) {
      var info = [];
      for (let i = 0; i < 50; i++) {
        info.push({
          lng: result.poiList.pois[i].location.lng,
          lat: result.poiList.pois[i].location.lat,
          count: 3 * 50 * Math.round(Math.random() * (10 - 2) + 2),
        });
      }

      this.map.plugin(["AMap.HeatMap"], () => {
        //初始化heatmap对象
        this.heatmap = new AMap.HeatMap(this.map, {
          radius: 56, //给定半径
          opacity: [0, 0.5],
          /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
        });
        //设置数据集
        this.heatmap.setDataSet({
          data: info,
          max: 100,
        });
        this.heatmapList.push(this.heatmap);
        this.heatmap.show();
      });
    },
    handleAddMarker() {
      // 构造点标记
      const marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: this.lnglat,
      });
      // 构造矢量圆形
      const circle = new AMap.Circle({
        // center: new AMap.LngLat(this.lnglat[0], this.lnglat[1]), // 圆心位置
        // radius:200,  //半径
        // strokeColor: "#1890ff",  //线颜色
        // strokeOpacity: 1,  //线透明度
        // strokeWeight: 3,  //线粗细度
        // fillColor: "#1890ff",  //填充颜色
        // fillOpacity: 0.35 //填充透明度
      });
      // 将以上覆盖物添加到地图上
      // 单独将点标记添加到地图上
      this.map.add(marker);
      // add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上
      this.map.add([marker, circle]);
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  created() {
    bus.$on("shareUserInput", (val) => {
      this.autoOptions.input = val.inputId;
      this.searchPlaceInput = val.userInput;
    });
    bus.$on("shareHeatMapShow", (val) => {
      this.showHeatOrNot = val;
    });
    this.getGis();
  },
  watch: {
    searchPlaceInput(newValue) {
      if (newValue != null) {
        //  console.log(newValue)
        this.placeSearch.search(newValue);
        this.drawBounds(newValue);
        this.map.setZoom(16, true, 1);
      }
    },
    showHeatOrNot(newValue) {
      if (newValue) {
        this.showHeatMap();
      } else {
        this.heatmap.hide();
      }
    },
  },
};
</script>

<style scoped>
#container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1450px;
  height: 700px;
}
.amap-icon {
  width: 200px;
}
.wrap {
  position: relative;
}

.box66 {
  position: absolute;
  top: 40px;
  left: 600px;
  font-weight: 700;
  font-size: 15px;
  color: #32325d;
}
.sfz1 {
  margin-top: 30px;
}
.box33 {
  position: absolute;
  top: 100px;
  left: 476px;
}
.box44 {
  position: absolute;
  top: 220px;
  left: 700px;
  width: 1080px;
  height: 500px;
  background-color: rgba(255, 255, 255, 1);
  font-family: "微软雅黑 Bold", "微软雅黑";
}
.box1 {
  position: relative;
  height: 950px;
  background-color: rgba(247, 248, 253, 1);
}
.box111 {
  position: absolute;
  width: 100%;
  height: 80px;
  background-color: rgba(94, 114, 228, 1);
}
.box2 {
  position: absolute;
  left: 30px;
  top: 30px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}
.box3 {
  position: absolute;
  top: 93px;
  left: 459px;
}

.box4 {
  position: absolute;
  top: 220px;
  left: 700px;
  width: 1080px;
  height: 600px;
  background-color: rgba(255, 255, 255, 1);
  font-family: "微软雅黑 Bold", "微软雅黑";
}

.box6 {
  position: absolute;
  top: 900px;
  left: 1630px;
}
.butt1 {
  width: 120px;
  height: 48px;
  -webkit-box-shadow: 0px 1px 5px rgb(0 0 0 / 35%);
  box-shadow: 0px 1px 5px rgb(0 0 0 / 35%);
  font-weight: 400;
}
.butt2 {
  width: 120px;
  height: 48px;
  background-color: rgba(94, 114, 228, 1);
  -webkit-box-shadow: 0px 1px 5px rgb(0 0 0 / 35%);
  box-shadow: 0px 1px 5px rgb(0 0 0 / 35%);
  font-weight: 400;
}

.span1 {
  color: #32325d;
  font-size: 15px;
  text-align: right;
  font-weight: 700;
}
.span2 {
  color: red;
}
.el-input >>> .el-input__inner {
  border-radius: 25px;
  width: 360px;
  height: 45px;
}
.sj1 {
  position: absolute;
  top: 40px;
  left: 65px;
}
.input1 {
  position: absolute;
  top: 28px;
  left: 145px;
}
.sj2 {
  position: absolute;
  top: 110px;
  left: 65px;
}
.sj250 {
  position: absolute;
  top: 180px;
  left: 65px;
}
.input2 {
  position: absolute;
  top: 98px;
  left: 145px;
}
.input250 {
  position: absolute;
  top: 168px;
  left: 145px;
}
.sj3 {
  position: absolute;
  top: 250px;
  left: 51px;
}
.sj350 {
  position: absolute;
  top: 180px;
  left: 51px;
}
.sj33 {
  position: absolute;
  top: 390px;
  left: 51px;
}
.input33 {
  position: absolute;
  top: 378px;
  left: 145px;
}
.input3 {
  position: absolute;
  top: 238px;
  left: 145px;
}
.input350 {
  position: absolute;
  top: 168px;
  left: 145px;
}
.sj4 {
  position: absolute;
  top: 320px;
  left: 51px;
}
.sj44 {
  position: absolute;
  top: 180px;
  left: 6px;
}
.sj22 {
  position: absolute;
  top: 110px;
  left: 11px;
}
.sj55 {
  position: absolute;
  top: 250px;
  left: 31px;
}
.input4 {
  position: absolute;
  top: 308px;
  left: 145px;
}
.input450 {
  position: absolute;
  top: 168px;
  left: 145px;
}
.input55 {
  position: absolute;
  top: 238px;
  left: 145px;
}
.sj5 {
  position: absolute;
  top: 430px;
  left: 36px;
}
.input5 {
  position: absolute;
  top: 388px;
  left: 140px;
  border: #d9d9db 1px solid;
}
.input555 {
  position: absolute;
  top: 0px;
  left: 180px;
  border: #d9d9db 1px solid;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.dt {
  position: absolute;
  left: 220px;
  top: 70px;
  width: 500px;
  height: 500px;
  border-radius: 15px;
}
.span8 {
  position: absolute;
  top: 40px;
  left: 610px;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  color: #32325d;
}
.code-btn {
  position: absolute;
  top: 5px;
  left: 235px;
  border: none;
  border-radius: 18px;
   
}
</style>